<template>
  <n-button-group>
    <n-button @click="activate('right')"> 更多 </n-button>
  </n-button-group>

  <n-drawer v-model:show="active" :width="502" :placement="placement">
    <n-drawer-content title="任务">
      <div style="display: flex">
        <QuerySelect name="days" label="时间" :options="daysOptions" style="margin: 1rem" />
        <QuerySelect
          name="isFinished"
          label="完成情况"
          :options="isFinishedOptions"
          style="margin: 1rem"
        />
      </div>

      <NTimeline size="large">
        <NTimelineItem
          v-for="task in Tasks.task"
          :title="task.title"
          :time="format(new Date(task.found_time), 'yyyy-MM-dd HH:mm:ss')"
          :key="task.id"
        >
          {{ task.content }}
          <div style="display: flex; flex-wrap: wrap; justify-content: center">
            <NPopconfirm :show-icon="false" @positive-click="Tasks.finishTasked(task.id)">
              <template #trigger>
                <NButton type="info" style="margin-left: 15rem" :disabled="!!task.finish_time"
                  >完成</NButton
                >
              </template>
              你确定完成该任务？
            </NPopconfirm>

            <NPopconfirm :show-icon="false" @positive-click="Tasks.deleTasked(task.id)">
              <template #trigger>
                <NButton type="error" style="margin-left: 1rem">删除</NButton>
              </template>
              你确定删除该任务？
            </NPopconfirm>
          </div>
        </NTimelineItem>
      </NTimeline>
      <NDivider v-if="Tasks.isEnd">我是有底线的</NDivider>
    </n-drawer-content>
  </n-drawer>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import type { DrawerPlacement } from 'naive-ui';
  import { taskStore } from '@/store/modules/task';
  import { format } from 'date-fns';
  import QuerySelect from '@/views/dashboard/workplace/QuerySelect.vue';

  const active = ref(false);
  const placement = ref<DrawerPlacement>('right');
  const activate = (place: DrawerPlacement) => {
    active.value = true;
    placement.value = place;
  };
  const Tasks = taskStore();
  Tasks.search();
  const daysOptions = [
      { label: '7天内', value: '7' },
      { label: '两周内', value: '14' },
      { label: '一个月内', value: '30' },
      { label: '三个月内', value: '90' },
      { label: '半年内', value: '180' },
    ],
    isFinishedOptions = [
      {
        label: '已完成',
        value: true,
      },
      {
        label: '未完成',
        value: false,
      },
    ];
</script>
